<template>
  <div class="taogifts">
    <div class="taogifts_main">
      <div class="card_top">
        <el-card :body-style="{ padding: '10' }" style="text-align: left;">
          <div class="taber">
            <el-tabs v-model="activeName" @tab-click="handleClick">
              <el-tab-pane label="淘礼金链接" name="1">
                <div>
                  <el-button
                    plain
                    style="width:100%;margin-bottom: 5px;"
                    @click="openreason"
                    >新增淘礼金链接</el-button
                  >
                  <el-table
                    v-loading="loading"
                    :data="tableData"
                    style="width: 100%"
                    :cell-style="rowClass"
                    :header-cell-style="headClass"
                    ref="singleTable"
                    @current-change="handleCurrentChange"
                    highlight-current-row
                  >
                    <el-table-column prop="id" label="ID">
                      <template slot-scope="scope">
                        <div>{{ scope.row.id }}</div>
                      </template>
                    </el-table-column>
                    <el-table-column prop="url" label="淘礼金链接">
                      <template slot-scope="scope">
                        <div>{{ scope.row.url }}</div>
                      </template>
                    </el-table-column>
                    <el-table-column prop="price" label="礼金金额">
                      <template slot-scope="scope">
                        <div>{{ scope.row.price }}</div>
                      </template>
                    </el-table-column>
                    <el-table-column prop="type" label="分类">
                      <template slot-scope="scope">
                        <el-tag v-if="scope.row.type == 1">主用链接</el-tag>
                        <el-tag type="success" v-if="scope.row.type == 2"
                          >备用链接</el-tag
                        >
                      </template>
                    </el-table-column>
                    <el-table-column prop="time" label="创建时间">
                      <template slot-scope="scope">
                        <span>{{ scope.row.create_at }}</span>
                      </template>
                    </el-table-column>
                    <el-table-column prop="time" label="修改时间">
                      <template slot-scope="scope">
                        <span>{{ scope.row.update_at }}</span>
                      </template>
                    </el-table-column>
                    <el-table-column prop="action" label="操作">
                      <template slot-scope="scope">
                        <div>
                          <el-button
                            @click.native.prevent="doedit(scope.row)"
                            type="text"
                            size="small"
                            >修改
                          </el-button>
                        </div>
                        <div>
                          <el-popconfirm
                            title="这是一段内容确定删除吗？"
                            @onConfirm="dodel(scope.row)"
                          >
                            <el-button
                              slot="reference"
                              style="margin-left: 0px;"
                              type="text"
                              size="small"
                              >删除
                            </el-button>
                          </el-popconfirm>
                        </div>
                      </template>
                    </el-table-column>
                  </el-table>
                  <div style="width:100%;text-align:right">
                    <!-- 分页器 -->
                    <!-- @size-change="handleSizeChange" -->
                    <!-- background -->
                    <el-pagination
                      @current-change="handleCurrentChange2"
                      :current-page="currentPage"
                      :page-size="pagesize"
                      :pager-count="11"
                      layout="total, prev, pager, next, jumper"
                      :total="count"
                    >
                      <!-- :page-sizes="[100, 200, 300, 400]" -->
                    </el-pagination>
                  </div>
                </div>
                <el-dialog
                  :title="isadd ? '新增淘礼金' : '修改淘礼金链接'"
                  :visible.sync="dialogshow"
                  width="500px"
                  @close="closedialog"
                >
                  <el-form :model="form">
                    <el-form-item label="淘礼金链接" :label-width="labelWidth">
                      <el-input
                        v-model="form.url"
                        autocomplete="off"
                      ></el-input>
                    </el-form-item>
                    <el-form-item label="礼金金额" :label-width="labelWidth">
                      <el-input
                        v-model="form.price"
                        autocomplete="off"
                      ></el-input>
                    </el-form-item>
                    <el-form-item label="链接分类" :label-width="labelWidth">
                      <el-radio v-model="form.type" label="1"
                        >主用链接</el-radio
                      >
                      <el-radio v-model="form.type" label="2"
                        >备用链接</el-radio
                      >
                    </el-form-item>
                  </el-form>
                  <div slot="footer" class="dialog-footer">
                    <el-button @click="closedialog">取 消</el-button>
                    <el-button type="primary" @click="doadd">确 定</el-button>
                  </div>
                </el-dialog>
              </el-tab-pane>
              <el-tab-pane label="淘礼金商品" name="2">
                <div class="taogoods">
                  <div class="displaybew">
                    <el-button
                      type="primary"
                      style="margin-bottom: 5px;"
                      @click="opentaogoods"
                      >新增淘礼金商品</el-button
                    >
                    <div class="displaybew">
                      <!-- size="medium" -->
                      <el-radio-group
                        @change="typechange"
                        v-model="type"
                        style="margin-right:10px"
                      >
                        <el-radio-button label="1">已上架</el-radio-button>
                        <el-radio-button label="2">已下架</el-radio-button>
                      </el-radio-group>
                      <el-radio-group
                        @change="shoptypechange"
                        v-model="shop_type"
                        style="margin-right:10px"
                      >
                        <el-radio-button label="1">天猫</el-radio-button>
                        <el-radio-button label="2">淘宝</el-radio-button>
                      </el-radio-group>
                      <el-select
                        style="margin-right:10px"
                        v-model="cash_grade"
                        placeholder="请选择档次"
                        clearable
                        @change="cashgradchange"
                      >
                        <el-option
                          v-for="item in options"
                          :key="item.id"
                          :label="item.price"
                          :value="item.id"
                        >
                        </el-option>
                      </el-select>
                      <el-input
                        class="searchipt_box"
                        placeholder="请输入搜索内容"
                        v-model="searchipt"
                        @change="dosearch"
                        clearable
                      >
                        <span slot="prefix">
                          <el-radio-group
                            v-model="searchchoose"
                            size="medium"
                            style="margin-top: 2px;"
                          >
                            <el-radio-button label="1">根据ID</el-radio-button>
                            <el-radio-button label="2"
                              >根据名称</el-radio-button
                            >
                          </el-radio-group>
                        </span>
                        <i
                          slot="suffix"
                          class="el-input__icon el-icon-search"
                        ></i>
                      </el-input>
                    </div>
                  </div>
                  <el-table
                    v-loading="loading"
                    :data="tableData2"
                    style="width: 100%"
                    :cell-style="rowClass"
                    :header-cell-style="headClass"
                    ref="singleTable"
                    @current-change="handleCurrentChange"
                    highlight-current-row
                  >
                    <el-table-column prop="goods_id" label="商品名称">
                      <template slot-scope="scope">
                        <div>{{ scope.row.goods_title }}</div>
                        <div>{{ scope.row.goods_id }}</div>
                      </template>
                    </el-table-column>
                    <el-table-column prop="goods_pic" label="商品主图">
                      <template slot-scope="scope">
                        <a
                          style="cursor: pointer;"
                          :href="scope.row.goods_url"
                          target="_blank"
                          rel="noopener noreferrer"
                        >
                          <el-image
                            style="width: 120px; height: 120px"
                            :src="scope.row.goods_pic"
                            fit="cover"
                          ></el-image>
                        </a>
                      </template>
                    </el-table-column>
                    <el-table-column prop="commission_bl" label="佣金比例">
                      <template slot-scope="scope">
                        <div>{{ scope.row.commission_bl }}%</div>
                      </template>
                    </el-table-column>
                    <el-table-column prop="cash_grade" label="礼金档次">
                      <template slot-scope="scope">
                        <div>{{ scope.row.cash_grade }}</div>
                      </template>
                    </el-table-column>
                    <el-table-column prop="price" label="商品原价">
                      <template slot-scope="scope">
                        <div>{{ scope.row.price }}</div>
                      </template>
                    </el-table-column>
                    <el-table-column prop="shop_name" label="店铺名称">
                      <template slot-scope="scope">
                        <div>{{ scope.row.shop_name }}</div>
                      </template>
                    </el-table-column>
                    <el-table-column prop="shop_type" label="店铺类型">
                      <template slot-scope="scope">
                        <el-tag v-if="scope.row.shop_type == 1">天猫</el-tag>
                        <el-tag type="success" v-if="scope.row.shop_type == 2"
                          >淘宝</el-tag
                        >
                      </template>
                    </el-table-column>
                    <el-table-column prop="coupon_url" label="优惠卷链接">
                      <template slot-scope="scope">
                        <a
                          :href="scope.row.coupon_url"
                          target="_blank"
                          rel="noopener noreferrer"
                          >{{ scope.row.coupon_url }}</a
                        >
                      </template>
                    </el-table-column>
                    <el-table-column prop="today_num" label="日销量">
                      <template slot-scope="scope">
                        <span>{{ scope.row.today_num }}</span>
                      </template>
                    </el-table-column>
                    <el-table-column prop="goods_day_num" label="月销量">
                      <template slot-scope="scope">
                        <span>{{ scope.row.month_num }}</span>
                      </template>
                    </el-table-column>
                    <el-table-column prop="action" label="操作">
                      <template slot-scope="scope">
                        <div>
                          <el-button
                            @click.native.prevent="doeditgoods(scope.row)"
                            type="text"
                            size="small"
                            >编辑
                          </el-button>
                        </div>
                        <div>
                          <el-button
                            style="margin-left: 0px;"
                            type="text"
                            size="small"
                            @click="upOrDownCashGoods(scope.row, 1)"
                            >上架
                          </el-button>
                        </div>
                        <div>
                          <el-button
                            style="margin-left: 0px;"
                            type="text"
                            size="small"
                            @click="upOrDownCashGoods(scope.row, 2)"
                            >下架
                          </el-button>
                        </div>
                      </template>
                    </el-table-column>
                  </el-table>
                  <!-- 分页器 -->
                  <div style="width:100%;text-align:right">
                    <!-- @size-change="handleSizeChange" -->
                    <!-- background -->
                    <el-pagination
                      @current-change="handleCurrentChange3"
                      :current-page="currentPage2"
                      :page-size="pagesize2"
                      :pager-count="11"
                      layout="total, prev, pager, next, jumper"
                      :total="count2"
                    >
                      <!-- :page-sizes="[100, 200, 300, 400]" -->
                    </el-pagination>
                  </div>
                  <!-- 新增/修改弹窗 -->
                  <el-dialog
                    :title="isadd ? '新增淘礼金商品' : '修改淘礼金商品'"
                    :visible.sync="taogoodsshow"
                    width="1000px"
                    @close="closetaogoods"
                  >
                    <el-form :model="taoform">
                      <el-form-item label="商品链接" :label-width="labelWidth">
                        <!-- style="width: 378px;" -->
                        <el-input
                          :disabled="!isadd"
                          v-model="taoform.goods_url"
                          autocomplete="off"
                        ></el-input>
                      </el-form-item>
                      <el-form-item
                        label="优惠卷链接"
                        :label-width="labelWidth"
                      >
                        <!-- style="width: 390px;" -->
                        <el-input
                          v-model="taoform.coupon_url"
                          autocomplete="off"
                        ></el-input>
                      </el-form-item>
                      <el-form-item label="商品名称" :label-width="labelWidth">
                        <!-- style="width: 390px;" -->
                        <el-input
                          v-model="taoform.goods_title"
                          autocomplete="off"
                        ></el-input>
                      </el-form-item>

                      <el-form-item label="店铺名称" :label-width="labelWidth">
                        <!-- style="width: 390px;" -->
                        <el-input
                          v-model="taoform.shop_name"
                          autocomplete="off"
                        ></el-input>
                      </el-form-item>
                      <el-form-item label="店铺类型" :label-width="labelWidth">
                        <el-radio v-model="taoform.shop_type" label="1"
                          >天猫</el-radio
                        >
                        <el-radio v-model="taoform.shop_type" label="2"
                          >淘宝</el-radio
                        >
                      </el-form-item>
                      <el-form-item label="商品图片" :label-width="labelWidth">
                        <div class="goodurl">
                          <div v-if="goods_pic == ''">
                            <el-upload
                              class="avatar-uploader"
                              action="http://gyapi.letuilm.com/upload"
                              :on-success="handleAvatarSuccess"
                              :limit="1"
                              :multiple="false"
                              :show-file-list="false"
                              :before-upload="beforeAvatarUpload"
                            >
                              <i class="el-icon-plus avatar-uploader-icon"></i>
                            </el-upload>
                          </div>
                          <div v-else class="uploadimg">
                            <img :src="goods_pic" class="avatar" />
                            <i class="el-icon-close" @click="closeimg()"></i>
                          </div>
                        </div>
                      </el-form-item>
                      <el-form-item label="商品原价" :label-width="labelWidth">
                        <!-- style="width: 390px;" -->
                        <el-input
                          v-model="taoform.price"
                          autocomplete="off"
                        ></el-input>
                      </el-form-item>
                      <el-form-item label="佣金比例" :label-width="labelWidth">
                        <!-- style="width: 390px;" -->
                        <el-input
                          v-model="taoform.commission_bl"
                          autocomplete="off"
                        ></el-input>
                      </el-form-item>
                      <el-form-item label="商品档次" :label-width="labelWidth">
                        <el-select
                          v-model="taoform.cash_id"
                          placeholder="请选择"
                        >
                          <el-option
                            v-for="item in options"
                            :key="item.id"
                            :label="item.price"
                            :value="item.id"
                          >
                          </el-option>
                        </el-select>
                      </el-form-item>
                    </el-form>
                    <div slot="footer" class="dialog-footer">
                      <el-button @click="closetaogoods">取 消</el-button>
                      <el-button type="primary" @click="doaddgoods"
                        >确 定</el-button
                      >
                    </div>
                  </el-dialog>
                </div>
              </el-tab-pane>
            </el-tabs>
          </div>
        </el-card>
      </div>
    </div>
  </div>
</template>

<script>
import {
  getCashUrlList,
  doAddCashUrl,
  doEditCashUrl,
  doDelCashUrl,
  getCashGrade,
  getMineCashGoods,
  doaddCashGoods,
  doEditCashGoods,
  upOrDownCashGoods
} from "@/api/taogifts/taogifts";
export default {
  filters: {
    formatTime: function(datetime, fmt) {
      var date = new Date(datetime);
      if (/(y+)/.test(fmt)) {
        fmt = fmt.replace(
          RegExp.$1,
          (date.getFullYear() + "").substr(4 - RegExp.$1.length)
        );
      }
      var o = {
        "M+": date.getMonth() + 1,
        "d+": date.getDate(),
        "h+": date.getHours(),
        "m+": date.getMinutes(),
        "s+": date.getSeconds()
      };
      for (var k in o) {
        if (new RegExp("(" + k + ")").test(fmt)) {
          var str = o[k] + "";
          fmt = fmt.replace(
            RegExp.$1,
            RegExp.$1.length === 1 ? str : ("00" + str).substr(str.length)
          );
        }
      }
      return fmt;
    }
  },
  name: "taogifts",
  data() {
    return {
      goods_id: "",
      search: "",
      cash_grade: "",
      type: "",
      searchchoose: "1",
      shop_type: "",
      searchipt: "",
      labelWidth: "100px",
      options: [
        // {
        //   id: "1",
        //   price: "200"
        // }
      ],
      value: "",
      taogoodsshow: false,
      isadd: true,
      taoform: {
        goods_id: "",
        goods_url: "", //商品地址
        coupon_url: "", //商品优惠卷链接
        price: "", //商品原价
        commission_bl: "", //佣金比例
        cash_grade: "", //礼金档次
        cash_id: "", //礼金ID
        shop_type: "1", //店铺类型
        goods_pic: "", //商品图片
        goods_title: "", //商品名称
        shop_name: "" //店铺名称
      },
      goods_pic: "",
      form: {
        id: "",
        url: "",
        type: "1",
        price: ""
      },
      dialogshow: false,
      pagesize2: 15,
      currentPage2: 1,
      count2: 0,
      pagesize: 15,
      currentPage: 1,
      count: 0,
      tabindex: "",
      loading: false,
      activeName: "1",
      tableData: [],
      tableData2: []
    };
  },

  computed: {},
  created() {
    this.getCashUrlList(1, 15);
    this.getCashGrade();
  },
  mounted() {},
  methods: {
    //上下架
    upOrDownCashGoods(row, type) {
      upOrDownCashGoods({
        goods_id: row.goods_id,
        type: type
      })
        .then(res => {
          if (res.code == 200) {
            console.log("上下架返回", res);
            if (type == 1) {
              this.$message.success("上架成功!");
            } else {
              this.$message.success("下架成功!");
            }
            this.getMineCashGoods(1, 15);
          } else {
            this.$message.info(res.msg);
          }
        })
        .catch(err => {
          console.log(err);
        });
    },

    cashgradchange(val) {
      console.log("cash_grade", val);
      this.getMineCashGoods(
        this.currentPage2,
        15,
        this.search,
        this.goods_id,
        this.shop_type,
        this.cash_grade,
        this.type
      );
    },
    typechange(val) {
      console.log("type", val);
      this.getMineCashGoods(
        this.currentPage2,
        15,
        this.search,
        this.goods_id,
        this.shop_type,
        this.cash_grade,
        this.type
      );
    },
    shoptypechange(val) {
      console.log("shop_type", val);
      this.getMineCashGoods(
        this.currentPage2,
        15,
        this.search,
        this.goods_id,
        this.shop_type,
        this.cash_grade,
        this.type
      );
    },
    dosearch() {
      console.log(this.searchipt);
      if (this.searchchoose == 1) {
        this.goods_id = this.searchipt;
        this.search = "";
      } else {
        this.search = this.searchipt;
        this.goods_id = "";
      }
      if (this.searchipt == "") {
        this.goods_id = "";
        this.search = "";
      }
      this.getMineCashGoods(
        this.currentPage2,
        15,
        this.search,
        this.goods_id,
        this.shop_type,
        this.cash_grade,
        this.type
      );
    },
    //获取我的淘礼金商品
    getMineCashGoods(
      page,
      pagesize,
      search,
      goods_id,
      shop_type,
      cash_grade,
      type
    ) {
      getMineCashGoods({
        page: page,
        pagesize: pagesize,
        search: search,
        goods_id: goods_id,
        shop_type: shop_type,
        cash_grade: cash_grade,
        type: type
      })
        .then(res => {
          if (res.code == 200) {
            console.log("淘礼金商品", res);
            this.tableData2 = res.data.data;
            this.count2 = res.data.count;
          } else {
            this.$message.info(res.msg);
          }
        })
        .catch(err => {
          console.log(err);
        });
    },

    closeimg() {
      this.goods_pic = "";
    },
    //   上传商品图片
    handleAvatarSuccess(res, file) {
      console.log("返回", res, file.raw);
      console.log("返回", res.data.url);
      this.taoform.goods_pic = `http://` + res.data.url;
      this.goods_pic = `http://` + res.data.url;
      console.log(this.form.goods_pic);
    },
    beforeAvatarUpload(file) {
      const isJPG = file.type === "image/jpeg";
      const isLt2M = file.size / 1024 / 1024 < 2;

      if (!isJPG) {
        this.$message.error("上传头像图片只能是 JPG 格式!");
      }
      if (!isLt2M) {
        this.$message.error("上传头像图片大小不能超过 2MB!");
      }
      return isJPG && isLt2M;
    },
    //获取淘礼金档次
    getCashGrade() {
      getCashGrade()
        .then(res => {
          if (res.code == 200) {
            console.log("档次返回", res);
            this.options = res.data;
          } else {
            this.$message.info(res.msg);
          }
        })
        .catch(err => {
          console.log(err);
        });
    },

    // 新增/修改淘礼金商品
    doaddgoods() {
      if (this.isadd == true) {
        var itemid = "";
        var reg = /id=(\d+)/i;
        this.taoform.goods_url.match(reg);
        const idArr = this.taoform.goods_url.match(reg);
        console.log("商品id", idArr[1]);
        itemid = idArr[1];
        this.taoform.goods_id = itemid;
        for (let i = 0; i < this.options.length; i++) {
          if (this.taoform.cash_id == this.options[i].id) {
            this.taoform.cash_grade = this.options[i].price;
          }
        }
        console.log("this.taoform", this.taoform);
        doaddCashGoods({ ...this.taoform })
          .then(res => {
            console.log("新增返回", res);
            if (res.code == 200) {
              this.getMineCashGoods(1, 15);
              this.$message.success("新增成功!");
              this.closetaogoods();
            } else {
              this.$message.info(res.msg);
            }
          })
          .catch(err => {
            console.log(err);
          });
      } else {
        doEditCashGoods({ ...this.taoform })
          .then(res => {
            console.log("修改返回", res);
            if (res.code == 200) {
              this.getMineCashGoods(1, 15);
              this.$message.success("修改成功!");
              this.closetaogoods();
            } else {
              this.$message.info(res.msg);
            }
          })
          .catch(err => {
            console.log(err);
          });
      }
    },
    // 新增/修改淘礼金链接
    doadd() {
      if (this.form.id == "") {
        doAddCashUrl({ ...this.form })
          .then(res => {
            console.log("新增返回", res);
            if (res.code == 200) {
              this.getCashUrlList(1, 15);
              this.$message.success("新增成功!");
              this.closedialog();
            } else {
              this.$message.info(res.msg);
            }
          })
          .catch(err => {
            console.log(err);
          });
      } else {
        doEditCashUrl({ ...this.form })
          .then(res => {
            console.log("修改返回", res);
            if (res.code == 200) {
              this.getCashUrlList(1, 15);
              this.$message.success("修改成功!");
              this.closedialog();
            } else {
              this.$message.info(res.msg);
            }
          })
          .catch(err => {
            console.log(err);
          });
      }
    },
    // 修改淘礼金商品
    doeditgoods(row) {
      this.isadd = false;
      this.taoform = row;
      this.goods_pic = row.goods_pic;
      this.taoform.shop_type = "" + row.shop_type;
      for (let i = 0; i < this.options.length; i++) {
        if (row.cash_grade == this.options[i].price) {
          this.taoform.cash_id = this.options[i].id;
        }
      }
      this.taogoodsshow = true;
      console.log("this.taoform", this.taoform);
    },
    // 修改淘礼金链接
    doedit(row) {
      this.isadd = false;
      this.form = row;
      this.form.type = "" + row.type;
      this.dialogshow = true;
      console.log("this.form", this.form);
    },
    // 删除淘礼金链接
    dodel(row) {
      // console.log("row", row);
      doDelCashUrl({
        id: row.id
      })
        .then(res => {
          console.log("删除返回", res);
          if (res.code == 200) {
            this.$message.success("删除成功!");
            this.getCashUrlList(1, 15);
          }
        })
        .catch(err => {
          console.log(err);
        });
    },
    //获取淘礼金链接列表
    getCashUrlList(page, pagesize) {
      getCashUrlList({
        page: page,
        pagesize: pagesize
      })
        .then(res => {
          if (res.code == 200) {
            console.log("淘礼金返回", res);
            this.count = res.data.count;
            this.tableData = res.data.data;
          } else {
            this.$message.info(res.msg);
          }
        })
        .catch(err => {
          console.log(err);
        });
    },

    closetaogoods() {
      this.goods_pic = "";
      this.taogoodsshow = false;
      this.taoform = this.$options.data().taoform;
    },
    closedialog() {
      this.dialogshow = false;
      this.form = this.$options.data().form;
    },
    handleCurrentChange2(val) {
      console.log(`当前页: ${val}`);
      this.currentPage = val;
      // this.getAdminGoods(this.currentPage, 15);
    },
    handleCurrentChange3(val) {
      console.log(`当前页: ${val}`);
      this.currentPage2 = val;
      this.getMineCashGoods(this.currentPage2, 15);
    },
    // 新增淘礼金商品弹窗
    opentaogoods() {
      this.isadd = true;
      this.taogoodsshow = true;
    },
    // 新增打开弹窗
    openreason() {
      this.isadd = true;
      this.dialogshow = true;
    },
    // 表头背景色
    headClass() {
      return "text-align: center;background:#eef1f6;";
    },
    // 表格样式设置
    rowClass() {
      return "text-align: center;";
    },
    // 表格选中行高亮
    setCurrent(row) {
      this.$refs.singleTable.setCurrentRow(row);
    },
    handleCurrentChange(val) {
      this.currentRow = val;
    },
    // 导航栏切换
    handleClick() {
      if (this.activeName == 1) {
        this.getCashUrlList(1, 15);
      } else {
        this.getMineCashGoods(1, 15);
      }
    }
  }
};
</script>

<style lang="less" scoped>
.displaybew {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.taogifts {
  // width: 970px;
  box-sizing: border-box;
  .taogifts_main {
    .taber {
      .taogoods {
        .goodurl::v-deep {
          .el-upload {
            width: 120px;
            height: 120px;
            border: 1px solid #000;
            .el-icon-plus {
              line-height: 120px;
            }
          }
          .avatar {
            width: 120px;
          }
          .uploadimg {
            position: relative;
            display: inline-block;
            width: 120px;
            height: 120px;
            .el-icon-close {
              display: none;
              cursor: pointer;
              z-index: 200;
              position: absolute;
              top: 2px;
              right: 0px;
              width: 30px;
              height: 30px;
              line-height: 30px;
              background: #fff;
              font-weight: 600;
              font-size: 20px;
              font-style: normal;
              color: #5680fe;
              text-align: center;
              border-radius: 15px;
              transition: all linear 0.5s;
            }
            .el-icon-close:hover {
              background: #607bfe;
              color: #fff;
              transform: rotate(90deg);
              -webkit-transform: rotate(90deg);
            }
          }
          .uploadimg:hover {
            .el-icon-close {
              display: block;
            }
          }
        }
        .searchipt_box::v-deep {
          width: 500px;
          .el-input__inner {
            padding-left: 135px;
          }
          .el-radio-button__inner {
            padding: 10px 5px;
            border: 0px solid #dcdfe6;
          }
          .el-radio-button__orig-radio:checked + .el-radio-button__inner {
            color: #0008ff;
            background-color: #ffffff;
            border-color: #ffffff;
            box-shadow: 0px 0 0 0 #409eff;
          }
        }
      }
    }
  }
}
</style>
